<?php
/**
 * @Author: Ron Chen
 * @Date:   2017-03-25 16:13:34
 * @Last Modified by:   Ron Chen
 * @Last Modified time: 2017-07-18 21:32:30
 */
use Yii;
?>

<div class="container-fluid" style="padding: 0px;">
	<div class="panel panel-default" style="height: 520px;">
		<?php if($message) {?>
			<div class="alert alert-warning" role="alert"><?php echo $message;?></div>
		<?php }?>
		<div class="panel-heading">保险信息</div>
		<div class="panel-body">
			<form id="confirm-form" action="/buy/confirm?id=<?=$id;?>" method="post" class="form-horizontal">
				<div class="form-group" style="margin-bottom:5px;">
					<div class="control-label col-xs-4" style="padding:5px 0px 0px 20px;">产品名称：</div>
					<div class="control-label col-xs-8">
						<h4><?= $policy["project_name"] ?></h4>
					</div>
				</div>
				<div class="form-group" style="margin-bottom:5px;">
					<div class="control-label col-xs-4" style="padding:5px 0px 0px 20px;">购买份数：</div>
					<div class="control-label col-xs-8">
						<select id='policy_num' class="form-control" name="number" style="border:0px;border-bottom:#eee 1px solid;">
							<option value="1" <?= 1==$policy["number"] ? "selected" : ""; ?>>1份</option>
							<option value="2" <?= 2==$policy["number"] ? "selected" : ""; ?>>2份</option>
							<option value="3" <?= 3==$policy["number"] ? "selected" : ""; ?>>3份</option>
							<option value="4" <?= 4==$policy["number"] ? "selected" : ""; ?>>4份</option>
							<option value="5" <?= 5==$policy["number"] ? "selected" : ""; ?>>5份</option>
							<option value="6" <?= 6==$policy["number"] ? "selected" : ""; ?>>6份</option>
							<option value="7" <?= 7==$policy["number"] ? "selected" : ""; ?>>7份</option>
							<option value="8" <?= 8==$policy["number"] ? "selected" : ""; ?>>8份</option>
							<option value="9" <?= 9==$policy["number"] ? "selected" : ""; ?>>9份</option>
						</select>
					</div>
				</div>
				<div class="form-group" style="margin-bottom:5px;">
					<div class="control-label col-xs-4" style="padding:5px 0px 0px 20px;">起保时间：</div>
					<div class="control-label col-xs-8">
	                    <input id="effect_date" name="effect_date" type="text" value="<?=$policy["effect_date"]?>"  placeholder="请选择出生日期" />
	                </div>
				</div>
				<div class="form-group">
					<div class="control-label col-xs-4" style="padding:5px 0px 0px 20px;">特别注意:</div>
					<div class="control-label col-xs-8">
						<span style="color:#ccc;">起保日期请选择出行前2天</span>
					</div>
				</div>
				<div class="form-group" style="margin-bottom:25px;">
					<div class="control-label col-xs-4" style="padding:5px 0px 0px 20px;">保障期限：</div>
					<div class="control-label col-xs-8">
						<input type="text" class="form-control" style="border:#eee 1px solid;" name="price_day" value="<?=$policy["price_day"]?>" readonly>
					</div>
				</div>
				<div class="form-group" style="margin-bottom:5px;">
					<div class="control-label col-xs-4" style="padding:5px 0px 0px 20px;">缴纳金额：</div>
					<div class="control-label col-xs-8">
						<input id="insurance_price" type="hidden" value="<?=$policy["insured_amount"]?>" />
						<input id="insurance_amount" name="premium_total" type="hidden" value="<?=$policy["premium_total"]?>" />
						
						<span id="price_total" style="font-size:2.1rem;color:#d9534f;">¥<?=$policy["premium_total"]?></span>元
					</div>
				</div>
				<div class="form-group" style="margin-bottom:5px;">
					<div class="control-label col-xs-6">需要寄送发票：</div>
					<div class="control-label col-xs-6">
						<input name="is_bill" type="checkbox" <?= intval($policy["is_bill"])== 1 ? "checked='checked'" : "";?>>
					</div>
				</div>

				<div class="checkbox" style="margin-top: 40px;padding-left: 10px;font-size: 12px;">
				    <label>
				    	<input type="checkbox" checked="checked"> 本人已阅读并同意<a target="_blank" href="/doc/insurance.pdf">《保险条款》</a>和<a target="_blank" href="/doc/service.pdf">《平台服务协议》</a>
				    </label>
				</div>
				
				<div style="margin-top: 20px;">
					<a id="btn_submit" class="btn btn-block btn-success">立即购买</a>	
				</div>
			</form>
		</div>
	</div>
</div>

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/mobiscroll.custom.min.js"></script>

<script>
	$(function (){
		// 选择份数变化相应的金额
		$("#policy_num").change(function(){
			var _sel_num = $(this).val();
			var _price   = $("#insurance_price").val();
			var amount = parseInt(_sel_num) * _price;
			$("#insurance_amount").val(amount);
			$("#price_total").html("¥" + amount);
		});
		
		var now = new Date(),
	    minDate = new Date(now.getFullYear() , now.getMonth(), now.getDate()),
	    maxDate = new Date(now.getFullYear() + 3 , now.getMonth(), now.getDate());
    	var instance = mobiscroll.date('#effect_date', {
		    theme: 'ios',
		    lang: 'zh',
		    display: 'bottom',
		    dateWheels: 'yy MM dd',
    		dateFormat: 'yy-mm-dd',
		    min: minDate,
		    max: maxDate
		});
		
		// 
		$("#btn_submit").on('click',function(e){
			document.getElementById('confirm-form').submit();
			return false;
		})
	});
</script>